import './App.css';
import React, {Component} from "react";
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";

export default class App extends Component {
    state = {
        todos: [
            {
                id: '001',
                name: '吃饭',
                done: true
            }, {
                id: '002',
                name: '睡觉',
                done: true
            }, {
                id: '003',
                name: '打代码',
                done: false
            }
        ]
    }

    addTodo = (data) => {
        this.setState({
            todos: [data, ...this.state.todos]
        })
    }

    changeTodo = (id, done) => {
        const {todos} = this.state
        const newTodos = todos.map(item => {
            if (item.id === id) return {...item, done}
            else return item
        })
        this.setState({
            todos: newTodos
        })
    }

    deleteTodo = (id) => {
        const {todos} = this.state
        const newTodos = todos.filter((item) => {
            return item.id !== id
        })
        this.setState({
            todos: newTodos
        })
    }

    checkAllTodo = (done) => {
        const {todos} = this.state
        const newTodos = todos.map(item => {
            return {...item, done}
        })
        this.setState({
            todos: newTodos
        })
    }

    clearAllDone = () => {
        const {todos} = this.state
        const newTodos = todos.filter(item => {
            return !item.done
        })
        this.setState({
            todos: newTodos
        })
    }

    render() {
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo}/>
                    <List todos={this.state.todos} deleteTodo={this.deleteTodo} changeTodo={this.changeTodo}/>
                    <Footer clearAllDone={this.clearAllDone} checkAllTodo={this.checkAllTodo} todos={this.state.todos}/>
                </div>
            </div>
        );
    }
}